<template>
	<view class="search-container">
		<NavBar is_search :value="search_val" @confirm="_get_search" @focus="show_history=true"
			@blur="show_history=$event" />
		<view class="search-history" v-show="show_history" :style="{paddingTop: pt+'rpx'}">
			<view class="history-header">
				<text>搜索历史</text>
				<uni-icons type="trash" size="25" color="#666" @click="clean_history" />
			</view>
			<view class="history-content" v-if="history_list.length">
				<text v-for="(item,index) in history_list" :key="index" @click="_get_search(item)">
					{{item}}
				</text>
			</view>
			<view v-else class="no-data">无搜索历史</view>
		</view>
		<view v-show="!show_history" :style="{paddingTop: pt+'rpx'}">
			<ListItem v-show="search_list.length" is_search :search_list="search_list" />
			<view v-show="!search_list.length" class="no-data">没有搜索到内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_val: '',
				search_list: [],
				show_history: true,
				history_list: [],
				pt: 80,
			};
		},
		onLoad() {
			this.history_list = this.$store.state.history_list

			const system_info = uni.getSystemInfoSync() // 同步获取系统信息
			const status_height = system_info.statusBarHeight ? system_info.statusBarHeight : 20
			this.pt = status_height * 2 + 60 // Navbar 中的搜索框高度为 60 rpx
		},
		onUnload() {
			this.$store.commit('set_history_list', this.history_list)
		},
		methods: {
			async _get_search(search_val) {
				this.show_history = false
				if (!this.history_list.includes(search_val)) {
					this.history_list.unshift(search_val)
				}
				this.search_val = search_val
				const search_list = await this.$http.get_search({
					search_val
				})
				this.search_list = search_list
			},
			clean_history() {
				this.history_list = []
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.navbar-container {
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.search-history {
		background-color: #fff;
		min-height: 300rpx;

		.history-header {
			font-size: 28rpx;
			padding: 15rpx;
			border-bottom: 1px solid #999;
			@include flex();
			color: $base-color;
		}

		.history-content {
			@include flex(flex-start, row, wrap);

			text {
				padding: 8rpx 15rpx;
				border: 1px solid;
				color: #373737;
				border-radius: 10rpx;
				font-size: 27rpx;
				margin: 20rpx 15rpx 0;
			}
		}
	}
</style>
